<template>
  <main class="decision_container">
    <h2>决策样本管理</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form :inline="true" :model="formInline" size="small">
          <el-form-item label="决策样本集编号：">
            <el-input
              v-model="formInline.jcybjID"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入决策样本集编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="需求场景：">
            <el-input
              v-model="formInline.xqcj"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入需求场景"
            ></el-input>
          </el-form-item>
          <el-form-item label="目标所属区域：">
            <el-input
              v-model="formInline.mbssdlqy"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入目标所属区域"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="cleanSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <!--          <el-form-item label="样本检索：">-->
          <!--            <el-input v-model="formInline.sample" placeholder="请输入需要检索的样本名称"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <!-- <el-button type="primary" @click="onSubmit">搜索</el-button> -->
            <el-button type="primary" @click="mergeJcybj">合并样本集</el-button>
            <el-button type="primary" @click="handleImportDecision"
              >导入</el-button
            >
            <el-button type="primary" @click="handleExportDecision"
              >导出</el-button
            >
            <el-button type="primary" @click="deleteAllSelectData"
              >批量删除</el-button
            >
            <el-button type="primary" @click="createYbjData"
              >添加样本集</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </header>
    <!--    表格内容-->
    <main class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="iconHadler"
        v-loading="tableLoading"
        @selection-change="handleSelectionChange"
        @expand-change="handleExpendChange"
        row-key="id"
        :expand-row-keys="rowKeyId"
        stripe
        class="mainTable"
        height="73vh"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="tableData[props.$index].jcybList"
              style="width: 100%"
              v-loading="subtableLoading"
            >
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column
                show-overflow-tooltip
                label="决策样本编号"
                prop="jcybID"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="是否合作目标"
                prop="sfhzmb"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="任务类型"
                prop="rwlx"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="目标形态"
                prop="mbxt"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="气象条件"
                prop="qxtj"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="攻击因素"
                prop="gjys"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="载荷类型"
                prop="zhlx"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="观测模式"
                prop="gcms"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="分辨率(m)"
                prop="fbl"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="优先级"
                prop="yxj"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <span class="operation" @click="sampleEdit(scope.row)"
                    >编辑&nbsp; |&nbsp;</span
                  >
                  <span class="operation" @click="deleteSubJcybData(scope.row)"
                    >删除</span
                  >
                </template>
              </el-table-column>
            </el-table>
            <!--小型分页-->
            <div class="subSmallPage">
              <el-pagination
                @size-change="SubHandleSizeChange"
                @current-change="SubHandleCurrentChange"
                :current-page.sync="subCurtent"
                small
                :page-size="subSize"
                layout="prev, pager, next"
                :total="subtotal"
              ></el-pagination>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index" width="55"></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="决策样本集编号"
          prop="jcybjID"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="需求场景"
          prop="xqcj"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="目标所属地理区域"
          prop="mbssdlqy"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="样本数量"
          prop="ybsl"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="operation" @click="createSubYbjData(scope.row)"
              >添加&nbsp; |&nbsp;</span
            >
            <span class="operation" @click="aggregateEdit(scope.row)"
              >编辑&nbsp; |&nbsp;</span
            >
            <span class="operation" @click="deleteAllSelectData(scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <div style="color:#fff">决策样本总数：{{ samplesTotal }}</div>
    <footer class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </footer>
    <!-- 导入弹窗 -->
    <el-dialog
      title="导入"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="jxCancell"
    >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="EXCEL文件路径：">
          <el-input
            v-model="formInline.demand"
            readonly
            placeholder="请选择文件"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <form id="fileForm">
            <input
              type="file"
              id="fileUpload"
              name="file"
              accept=".xls, .xlsx"
              style="display: none;"
            />
            <el-button type="primary" @click="selectWjButton">浏览</el-button>
            <el-button
              type="primary"
              @click="jxExcelFile"
              :disabled="formInline.demand === ''"
              >解析文件</el-button
            >
          </form>
        </el-form-item>
      </el-form>
      <main class="table_container">
        <div :key="jxTableKey">
          <el-table
            :data="jxInputData"
            style="width: 100%"
            :row-class-name="iconHadler"
            :default-expand-all="true"
            v-loading="jxTableLoading"
            stripe
            class="mainTable"
            height="380"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="jxInputData[props.$index].jcybList"
                  style="width: 100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    label="决策样本编号"
                    prop="jcybID"
                    width="110"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="是否合作目标"
                    prop="sfhzmb"
                    width="110"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="任务类型"
                    prop="rwlx"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="目标形态"
                    prop="mbxt"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="气象条件"
                    prop="qxtj"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="攻击因素"
                    prop="gjys"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="载荷类型"
                    prop="zhlx"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="观测模式"
                    prop="gcms"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="分辨率(m)"
                    prop="fbl"
                  ></el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="优先级"
                    prop="yxj"
                  ></el-table-column>
                </el-table>
                <!--弹窗录入样本分页-->
                <div class="subSmallPage">
                  <el-pagination
                    @current-change="dialogHandleCurrentChange"
                    :current-page.sync="dialogCurtent"
                    small
                    :page-size="dialogSize"
                    layout="prev, pager, next"
                    :total="dialogtotal"
                  ></el-pagination>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="决策样本集编号"
              prop="jcybjID"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="需求场景"
              prop="xqcj"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="目标所属地理区域"
              prop="mbssdlqy"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="样本数量"
              prop="ybsl"
            ></el-table-column>
          </el-table>
        </div>
      </main>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jxCommitData">确定</el-button>
        <el-button @click="jxCancell">取消</el-button>
      </span>
    </el-dialog>
    <!-- 添加样本集 -->
    <el-dialog
      :title="sampleSetTitle == 0 ? '添加样本集' : '编辑样本集'"
      :visible.sync="aggregateVisible"
    >
      <el-form
        :label-position="labelPosition"
        label-width="140px"
        :rules="rules"
        :model="aggregateData"
        size="small"
        style="margin-top: 35px"
        ref="ybjFrom"
      >
        <el-row style="padding: 10px 20px">
          <el-col :span="12">
            <el-form-item label="决策样本集编号" prop="jcybjID">
              <el-input
                v-model="aggregateData.jcybjID"
                v-max-length-tip="30"
                v-no-space
                placeholder="请输入决策样本集编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求场景" prop="xqcj">
              <el-input
                v-model="aggregateData.xqcj"
                v-max-length-tip="30"
                v-no-space
                placeholder="请输入需求场景"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标所属地理区域" prop="mbssdlqy">
              <el-input
                v-model="aggregateData.mbssdlqy"
                v-max-length-tip="30"
                v-no-space
                placeholder="请输入目标所属地理区域"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitJcybjData">确 定</el-button>
        <el-button @click="cancelJcybj">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加样本 -->
    <el-dialog
      :title="smapleTitle == 0 ? '添加样本' : '编辑样本'"
      :visible.sync="sampleVisible"
    >
      <el-form
        :label-position="labelPosition"
        label-width="150px"
        :model="sampleData"
        :rules="subRules"
        size="small"
        style="margin-top: 35px"
        ref="subYbForm"
      >
        <el-row style="padding: 10px 20px">
          <el-col :span="12">
            <el-form-item label="决策样本ID" prop="jcybID">
              <el-input
                v-model="sampleData.jcybID"
                v-max-length-tip="30"
                v-no-space
                placeholder="请输入决策样本ID"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否合作目标" prop="sfhzmb">
              <el-select
                v-model="sampleData.sfhzmb"
                placeholder="请选择是否合作目标"
              >
                <el-option
                  v-for="item in sfhzOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务类型" prop="rwlx">
              <el-select
                clearable
                v-model="sampleData.rwlx"
                placeholder="请选择任务类型"
              >
                <el-option
                  v-for="(item, index) in missionTypeOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标形态" prop="mbxt">
              <el-select
                clearable
                v-model="sampleData.mbxt"
                placeholder="请选择目标动态"
              >
                <el-option
                  v-for="(item, index) in targetShapeOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="气象条件" prop="qxtj">
              <el-select
                clearable
                v-model="sampleData.qxtj"
                placeholder="请选择气象条件"
              >
                <el-option
                  v-for="(item, index) in weatherConditionOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="攻击因素" prop="gjys">
              <el-select v-model="sampleData.gjys" placeholder="请选择是否因素">
                <el-option
                  v-for="item in ysOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="载荷类型" prop="zhlx">
              <el-select v-model="sampleData.zhlx" placeholder="请选择载荷类型">
                <el-option
                  v-for="item in zhlxOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="观测模式" prop="gcms">
              <el-select v-model="sampleData.gcms" placeholder="请选择观测模式">
                <el-option
                  v-for="item in gcmsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分辨率(m)" prop="fbl">
              <el-select v-model="sampleData.fbl" placeholder="请选择分辨率">
                <el-option
                  v-for="item in resolutionOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" prop="yxj">
              <el-select v-model="sampleData.yxj" placeholder="请选择优先级">
                <el-option
                  v-for="item in yxjOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAndUpdateSubJcybData"
          >确 定</el-button
        >
        <el-button @click="cancelSubJcyb">取 消</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
